<script>
export default {
  name: "index",
  data(){
    return {
      userId:0,
      orderId:0,
      dataList:[],
      data:{}
    }
  },
  methods:{
    getLogistics(){
      uni.request({
        url:'http://localhost:8080/app/shop/logistics/details/'+this.orderId,
        method: 'GET',
        success:res =>{
          console.log(res)
          if (res.statusCode == 200){
            this.data = res.data.data
            this.data.tripartiteLogisticsData.logisticsTraceDetailList.forEach(item=>{
              this.dataList.unshift(item)
            })
            console.log(this.data)
          }
        }
      })
    }
  },
  onLoad (option) {
    console.log(option.orderId); // 打印出上个页面传递的参数。
    console.log(option.userId); // 打印出上个页面传递的参数。
    this.userId = option.orderId;
    this.orderId = option.orderId;
    this.getLogistics()
  }

}

</script>

<template>
  <view class="zong">
    <view>
      物流单号: {{data.tripartiteLogisticsData.mailNo}}
    </view>
    <view>
         <p>&nbsp;</p>
    </view>
    <view>
      快件最新信息:<br>
      {{data.tripartiteLogisticsData.theLastMessage}}
    </view>
    <view class="user_box" style="width: 80%; margin: 40rpx auto;">
      <view class="user_for" v-for="(list,id) in dataList" :key="id">
        <view class="line_box">
          <!-- 圆球 -->
          <view class="line_radio" :style="{ 'background' : '#ef6f16'  , 'border' :  'solid 6rpx #fbc293'}"></view>
          <!-- 线 -->
          <view class="line_for" v-for="item in 5" :style="{ 'background' : '#ef6f16'}"></view>
        </view>

        <view class="right_box"  :style="{ 'color' :  '#ef6f16'}">
          <view class="title">{{list.title}} <text style="margin-left: 20rpx;">({{list.desc}})</text></view>
          <view class="desc">
<!--            <image src="../../static/logo.png" mode=""></image>-->
            {{list.timeDesc}}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.user_for{
  display: flex;
}
.item_year {
  font-size: 34rpx;
  height: 50rpx;
}
.line_for {
  width: 4rpx;
  height: 24rpx;
  margin: 0 20rpx 10rpx;
  background-color:#559DFF;
}
.line_radio {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}
.right_box {
  padding: 0rpx 20rpx 20rpx 20rpx;
}
.desc{
  font-size: 30rpx;
  color: #8e8b8d;
  display: flex;
  margin-top: 20rpx;
  align-items: center;

}
image{
  margin-right: 20rpx;
  width: 34rpx;
  height: 34rpx;
  border-radius: 50%;
}
</style>